<template>
  <div class="countdown">
    <!-- 按钮 -->
    <div class="countdown-btn" :class="{ 'countdown-btn-sun': isSun }">
      <div
        class="countdown-btn-bg items-center"
        :class="{ 'countdown-btn-bg-sun': isSun }"
      >
        <div class="countdown-btn-title">{{ $t("lotteryMoney.cjdjs") }}</div>
        <div class="countdown-btn-center items-center">
          <div
            class="countdown-btn-center-text countdown-btn-center-width"
            :class="{ 'countdown-btn-center-text-sun': isSun }"
          >
            {{ hours }}
          </div>
          <div class="countdown-btn-center-point">:</div>
          <div
            class="countdown-btn-center-text countdown-btn-center-width"
            :class="{ 'countdown-btn-center-text-sun': isSun }"
          >
            {{ minutes }}
          </div>
          <div class="countdown-btn-center-point">:</div>
          <div
            class="countdown-btn-center-text countdown-btn-center-width"
            :class="{ 'countdown-btn-center-text-sun': isSun }"
          >
            {{ seconds }}
          </div>
        </div>
      </div>
    </div>
    <!-- 描述 -->
    <div class="countdown-footer">
      {{ $t("lotteryMoney.cjdjsks") }}
    </div>
  </div>
</template>
<script setup lang="ts" name="lotteryStart">
import { useEventBus } from "@vueuse/core";

const props = defineProps<{
  lottery: Object;
  isDisabled: boolean;
  isSun: boolean; // 是不是周日的超级大赢家
}>();

const emit = defineEmits(["countdownDone"]);

// 定时器-通知
let unsubscribe: any = null; // 定时器通知对象
let unsubscribeFns: any = {}; // 执行的函数数组
const moneyInterval = useEventBus("lottery-money-interval-emit");

// 页面属性
const pageData = reactive({
  activitytStatus: 0, //   1 未开始  2 进行中  3 已结束
  serverTime: 0, // 默认当前时间
});

// 未开始倒计时
let hours = ref("--");
let minutes = ref("--");
let seconds = ref("--");
function updateLotteryCountdown() {
  const endTime = Number(props.lottery.beginTime);
  let isRefrrsh = false;
  // 计算函数
  const updateCountdown = (now: any) => {
    const distance = endTime - Number(now);
    // 倒计时结束时的处理
    if (distance < 0 && !isRefrrsh) {
      isRefrrsh = true;
      setTimeout(() => {
        emit("countdownDone");
      }, 500);
      return;
    }
    // 计算剩余的小时、分钟和秒
    if (distance >= 0) {
      // console.log("-distance--", distance);
      hours.value = `${Math.floor(
        (distance % (1000 * 60 * 60 * 24 * 7)) / (1000 * 60 * 60)
      )}`;
      if (Number(hours.value) < 10) hours.value = `0${hours.value}`;
      minutes.value = `${Math.floor(
        (distance % (1000 * 60 * 60)) / (1000 * 60)
      )}`;
      if (Number(minutes.value) < 10) minutes.value = `0${minutes.value}`;
      seconds.value = `${Math.floor((distance % (1000 * 60)) / 1000)}`;
      if (Number(seconds.value) < 10) seconds.value = `0${seconds.value}`;
    }
  };
  // 先执行一次,不然要等一秒才能计算
  if (pageData.serverTime > 0) updateCountdown(pageData.serverTime);
  //
  unsubscribeFns["updateLotteryCountdown"] = (val: number) => {
    if (pageData.serverTime != val) pageData.serverTime = val;
    // console.log("lottery-start-1111-定时器")
    updateCountdown(val);
  };
}

/**
 * @description: 监听属性变化
 * 1. 获取到活动开始时间,更新倒计时
 * 2. 别人下注,更新倒计时
 */
const lotteryWatch = watch(
  () => props.lottery,
  (newVal, oldVal) => {
    if (newVal && newVal.beginTime) {
      updateLotteryCountdown();
    }
  },
  {
    immediate: true,
  }
);

onMounted(async () => {
  // 1. 统一的定时器,通知,组件加载的时候只初始化一次
  if (!unsubscribe) {
    unsubscribe = moneyInterval.on((val) => {
      if (unsubscribeFns && Object.keys(unsubscribeFns).length > 0) {
        Object.keys(unsubscribeFns).forEach((key: any) => {
          // console.log("--unsubscribeFns--", key);
          const fn = unsubscribeFns[key];
          if (fn && typeof fn === "function") {
            fn(val);
          }
        });
      }
    });
  }
});

onBeforeUnmount(() => {
  // 1.注销通知
  if (unsubscribe) unsubscribe();
  lotteryWatch && lotteryWatch();
});
</script>
<style scoped lang="scss">
.countdown {
  position: fixed;
  z-index: 99;
  bottom: 0;
  width: 100vw;
  padding-bottom: var(--safe-area-inset-bottom);
  border-radius: 16 * 2px 16 * 2px 0 0;
  background-color: #fff;
  border-top: 1px solid rgba(115, 119, 128, 0.15);

  &-btn {
    margin: 7 * 2px 15 * 2px;
    justify-content: center;
    background: #f9f6ec;
    border-radius: 100px;
    border: 0.5px solid #002853;
    padding: 3 * 2px;
    &-sun {
      background: #fff2b2;
    }
    &-bg {
      background: #bcd7f4;
      border-radius: 100px;
      border: 0.5px solid #002853;
      padding: 7 * 2px 0;
      justify-content: center;
      &-sun {
        background: #f1dfb2;
      }
    }
    &-title {
      font-size: 13 * 2px;
      font-weight: 590;
      color: #002853;
      margin-right: 8 * 2px;
    }
    &-center {
      justify-content: center;
      &-text {
        font-size: 15 * 2px;
        font-weight: 700;
        color: #fff;
        background-color: #007bff;
        border-radius: 4 * 2px;
        padding: 4 * 2px 4 * 2px;
        margin-left: 4 * 2px;
        &-sun {
          background: #ffae00;
        }
      }
      &-width {
        min-width: 28 * 2px;
        text-align: center;
      }
      &-point {
        font-size: 15 * 2px;
        font-weight: 590;
        color: #002853;
        margin-left: 4 * 2px;
      }
    }
  }
  &-footer {
    text-align: center;
    font-size: 13 * 2px;
    font-weight: 400;
    color: #999da7;
  }
}
</style>
